<template>
  <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="80px"
    size="default">
    <el-row>
      <el-col :span="8" class="grid-cell">
        <el-form-item label="学生姓名" prop="nickName" class="required label-center-align">
          <el-input v-model="formData.nickName" type="text" clearable></el-input>
        </el-form-item>
        <el-row>
        </el-row>
        <el-form-item label="登录账号" prop="userName" class="required">
          <el-input v-model="formData.userName" type="text" clearable></el-input>
        </el-form-item>
        <el-form-item label="邮箱地址" prop="email" class="required label-center-align">
          <el-input v-model="formData.email" type="text" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8" class="grid-cell">
        <el-form-item label="学生性别" prop="gender" class="required label-center-align">
          <el-radio-group v-model="formData.gender">
            <el-radio v-for="(item, index) in genderOptions" :key="index" :label="item.value"
              :disabled="item.disabled" style="{display: inline}">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row>
        </el-row>
        <el-form-item label="登录密码" prop="password" class="required label-center-align">
          <el-input v-model="formData.password" type="password" clearable></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone" class="required label-center-align">
          <el-input v-model="formData.phone" type="text" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8" class="grid-cell">
        <el-form-item label="上传图片" prop="imageUpload" class="required label-center-align">
          <el-upload :file-list="imageUploadFileList" :headers="imageUploadUploadHeaders"
            :data="imageUploadUploadData" list-type="picture-card" show-file-list :limit="3"> <template
              #default><i class="el-icon-plus"></i></template></el-upload>
        </el-form-item>
        <el-form-item label="QQ号码" prop="qqNumber" class="required label-center-align">
          <el-input v-model="formData.qqNumber" type="text" clearable></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="个性签名" prop="signature" class="required label-center-align">
      <el-input type="textarea" v-model="formData.signature" rows="4"></el-input>
    </el-form-item>
    <el-form-item label="个人简介" prop="introduction" class="required label-center-align">
      <el-input type="textarea" v-model="formData.introduction" rows="4"></el-input>
    </el-form-item>
    <div class="static-content-item">
      <div>所属班级</div>
    </div>
    <el-row>
      <el-col :span="12" class="grid-cell">
        <el-form-item label="所有班级" prop="allClasses" class="required label-center-align">
          <el-select v-model="formData.allClasses" class="full-width-input" clearable filterable>
            <el-option v-for="(item, index) in allClassesOptions" :key="index" :label="item.label"
              :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" class="grid-cell">
        <el-form-item label="指定班级" prop="specifyClass" class="required label-center-align">
          <el-select v-model="formData.specifyClass" class="full-width-input" clearable filterable>
            <el-option v-for="(item, index) in specifyClassOptions" :key="index" :label="item.label"
              :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
  export default {
    components: {},
    props: ['data'],
    data() {
      return {
        formData: {
          nickName: "",
          userName: "",
          email: "",
          gender: "",
          password: "",
          phone: "",
          imageUpload: null,
          qqNumber: "",
          signature: "",
          introduction: "",
          allClasses: 3,
          specifyClass: 1,
        },
        rules: {
          nickName: [{
            required: true,
            message: '字段值不可为空',
          }],
          userName: [{
            required: true,
            message: '字段值不可为空',
          }],
          email: [{
            required: true,
            message: '字段值不可为空',
          }, {
            pattern: /^([-_A-Za-z0-9.]+)@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/,
            trigger: ['blur', 'change'],
            message: '请输入邮箱地址'
          }],
          gender: [{
            required: true,
            message: '字段值不可为空',
          }],
          password: [{
            required: true,
            message: '字段值不可为空',
          }, {
            pattern: /^[A-Za-z0-9]+$/,
            trigger: ['blur', 'change'],
            message: '请输入数字+字母'
          }],
          phone: [{
            required: true,
            message: '字段值不可为空',
          }, {
            pattern: /^[-]?\d+(\.\d+)?$/,
            trigger: ['blur', 'change'],
            message: '请输入数字'
          }],
          imageUpload: [{
            required: true,
            message: '字段值不可为空',
          }],
          qqNumber: [{
            required: true,
            message: '字段值不可为空',
          }, {
            pattern: /^[-]?\d+(\.\d+)?$/,
            trigger: ['blur', 'change'],
            message: '请输入数字'
          }],
          signature: [{
            required: true,
            message: '字段值不可为空',
          }],
          introduction: [{
            required: true,
            message: '字段值不可为空',
          }],
          allClasses: [{
            required: true,
            message: '字段值不可为空',
          }],
          specifyClass: [{
            required: true,
            message: '字段值不可为空',
          }],
        },
        genderOptions: [{
          "label": "男",
          "value": 1
        }, {
          "label": "女",
          "value": 2
        }],
        allClassesOptions: [{
          "label": "Python",
          "value": 1
        }, {
          "label": "测试班级",
          "value": 2
        }, {
          "label": "沙雕聚集班",
          "value": 3
        }, {
          "value": 4,
          "label": "猛男训练班"
        }],
        specifyClassOptions: [{
          "label": "Java班",
          "value": 1
        }, {
          "label": "BigData班",
          "value": 2
        }, {
          "label": "Vue内训班",
          "value": 3
        }],
        imageUploadFileList: [],
        imageUploadUploadHeaders: {},
        imageUploadUploadData: {},
      }
    },
    computed: {},
    watch: {},
    created() {},
    methods: {
      submitForm() {
        this.$refs['vForm'].validate(valid => {
          if (!valid) return
          //TODO: 提交表单
        })
      },
      resetForm() {
        this.$refs['vForm'].resetFields()
      }
    },
    mounted(){
      this.formData = this.data;
    }
  }
  
</script>

<style lang="scss">
  .el-input-number.full-width-input,
  .el-cascader.full-width-input {
    width: 100% !important;
  }
  
  .el-form-item--medium {
    .el-radio {
      line-height: 36px !important;
    }
    
    .el-rate {
      margin-top: 8px;
    }
  }
  
  .el-form-item--small {
    .el-radio {
      line-height: 32px !important;
    }
    
    .el-rate {
      margin-top: 6px;
    }
  }
  
  .el-form-item--mini {
    .el-radio {
      line-height: 28px !important;
    }
    
    .el-rate {
      margin-top: 4px;
    }
  }
  
  .clear-fix:before,
  .clear-fix:after {
    display: table;
    content: "";
  }
  
  .clear-fix:after {
    clear: both;
  }
  
  .float-right {
    float: right;
  }
  
</style>

<style lang="scss" scoped>
  div.table-container {
    table.table-layout {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;

      td.table-cell {
        display: table-cell;
        height: 36px;
        border: 1px solid #e1e2e3;
      }
    }
  }
  
  .label-left-align ::v-deep .el-form-item__label {
    text-align: left;
  }
  
  .label-center-align ::v-deep .el-form-item__label {
    text-align: center;
  }
  
  .label-right-align ::v-deep .el-form-item__label {
    text-align: right;
  }

  .static-content-item {
    min-height: 20px;
    display: flex;
    align-items: center;

    ::v-deep .el-divider--horizontal {
      margin: 0;
    }
  }
  
</style>